<template>
    <div class="home">
      <div class="stat">
        <!--用户卡片-->
        <div class="stat-user">
          <div class="stat-user__title">
            后台管理系统模板
          </div>
          <div class="stat-user__detail">
            <p>欢迎您，{{username}}</p>
            <p>当前时间：{{nowTime}}</p>
          </div>
          <img class="stat-user__portrait" src="../../../static/portrait.jpg" alt="">
        </div>
        <!--系统统计数据概览-->
        <div class="stat-info">
          <el-row :gutter="20" v-for="(info, index) in stat" :key="index">
            <el-col :span="8" v-for="(item, index) in info" :key="index">
              <div class="stat-info__item">
                <div class="stat-info__icon" :style="{'background-color': item.bgColor}">
                  <i :class="item.icon"></i>
                </div>
                <div class="stat-info__detail">
                  <p class="stat-info__total">{{item.total}}</p>
                  <p class="stat-info__title">{{item.title}}</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <el-row :gutter="20" class="margin-t-20 list">
        <!--待办事项-->
        <el-col :span="12">
          <el-card>
            <div slot="header">
              <span><i class="el-icon-tickets margin-r-5"></i>待办事项</span>
              <i class="el-icon-plus" @click="addNewTodoItem" title="新增"></i>
            </div>
            <p v-for="(item ,i) in todoList" :key="i">
              <el-checkbox v-model="item.isChecked"></el-checkbox>
              <span :class="{active: item.isChecked}">{{i + 1 > 9 ? i + 1 : '0' + (i + 1)}}-{{item.title}}</span>
            </p>
          </el-card>
        </el-col>
        <!--最新消息-->
        <el-col :span="12">
          <el-card>
            <div slot="header">
              <span><i class="el-icon-news margin-r-5"></i>最新消息</span>
            </div>
            <p v-for="(item ,i) in latestNewList" :key="i">
              <span class="latest-new-list__time"><i class="el-icon-time margin-r-5"></i>{{item.time}}：</span>
              <span>{{item.title}}</span>
            </p>
          </el-card>
        </el-col>
      </el-row>
    </div>
    </template>
    
    <script>
      import Util from '@/assets/js/util';
      let todoList = [], latestNewList = [];
      for (let i = 0; i < 10; i++) {
    
        todoList.push({
          title: `今天需要做的待办事项咯~~~`,
          isChecked: false
        });
        latestNewList.push({
          time: new Date(new Date().getTime()  + i * 24 * 3600 * 1000).Format('yyyy-MM-dd'),
          title: `今日的最新新闻来咯~~~`
        });
      }
      export default {
        name: "Home",
        data() {
          return {
            stat: [
              [
                {
                  icon: 'el-icon-service',
                  title: '公司总员工数',
                  total: 198397,
                  bgColor: '#ebcc6f'
                },
                {
                  icon: 'el-icon-location-outline',
                  title: '客户分布区域',
                  total: 19,
                  bgColor: '#3acaa9'
                },
                {
                  icon: 'el-icon-star-off',
                  title: '收货好评',
                  total: 190857,
                  bgColor: '#67c4ed'
                }
              ],
              [
                {
                  icon: 'el-icon-edit-outline',
                  title: '历史订单数',
                  total: 9397,
                  bgColor: '#af84cb'
                },
                {
                  icon: 'el-icon-share',
                  title: '产品总转发数量',
                  total: 9097,
                  bgColor: '#67c4ed'
                },
                {
                  icon: 'el-icon-goods',
                  title: '产品总数',
                  total: 397,
                  bgColor: '#ebcc6f'
                }
              ]
            ],
            username: localStorage.getItem('username'),
            nowTime: new Date().Format('yyyy-MM-dd hh:mm:ss'),
            todoList,
            latestNewList
          }
        },
        methods: {
          setNowTime() {
    
            setInterval(() => {
    
              this.nowTime = new Date().Format('yyyy-MM-dd hh:mm:ss')
            }, 1000);
          },
          addNewTodoItem() {
    
            this.$prompt('请输入待办事项主题', '新增待办事项', {
              confirmButtonText: '确定',
              cancelButtonText: '取消'
            }).then(({value}) => {
    
              this.$message({
                type: 'success',
                message: '新增待办事项成功'
              });
              this.todoList.unshift({
                title: value,
                isChecked: false
              });
            }).catch(() => {
    
              this.$message({
                type: 'info',
                message: '取消新增待办事项'
              });
            });
          }
        },
        mounted() {
          this.setNowTime();
        }
      }
    </script>
    
    <style scoped lang="less">
      .home {
        height: calc(~'100% - 40px');
      }
      .stat {
        display: flex;
        height: 230px;
      }
      .stat-user {
        position: relative;
        width: 300px;
        background-color: #f5f5f5;
        box-shadow: 2px 2px 5px #ccc;
      }
      .stat-user__title {
        height: 100px;
        background-color:#459f75;
        color: white;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        line-height: 70px;
      }
      .stat-user__detail {
        padding-top: 50px;
        color: #666;
        font-size: 13px;
        text-align: center;
      }
      .stat-user__portrait {
        position: absolute;
        top: 50%;
        left: 50%;
        width:80px;
        height:80px;
        border-radius: 50%;
        border: 3px solid white;
        box-shadow: 0 0 5px #ccc;
        margin-top: -55px;
        margin-left: -40px;
      }
      .stat-info {
        flex: 1;
        margin-left: 20px;
      }
      .el-row + .el-row {
        margin-top: 10px;
      }
      .stat-info__item {
        display: flex;
        height: 110px;
        box-shadow: 2px 2px 5px #ccc;
        background-color: #f5f5f5;
      }
      .stat-info__icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 80px;
        color: white;
        [class*='el-icon'] {
          font-size: 50px;
        }
      }
      .stat-info__detail {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .stat-info__total {
        color: #0085d0;
        font-size: 27px;
        font-weight: bold;
      }
      .stat-info__title {
        color: #666;
        font-size: 12px;
      }
      .list {
        display: flex;
        height: calc(~'100% - 250px');
        .el-col {
          height: 100%;
        }
      }
      .el-card {
        height: 100%;
        background-color: #f5f5f5;
        .el-icon-plus {
          float: right;
          color: #F56C6C;
          font-weight: bold;
          cursor: pointer;
        }
      }
      .el-card__header span {
        color: #3b7459;
      }
      .el-card__body {
        p {
          border-bottom: 1px solid #e5e5e5;
          color: #555;
          font-size: 15px;
          line-height: 30px;
        }
        .active {
          color: #666;
          text-decoration: line-through;
        }
      }
      .latest-new-list__time {
        color: #666;
        font-size: 14px;
      }
    </style>
    